import { createStore } from 'vuex'

// 导入获取歌词
import {getMusicLyric} from '@/api/item'
export default createStore({
  state: {
    // 底部组件创建，由此处的数据进行传输，当然，这只是其中一个例子
    // 后面会介绍通过接口获取歌曲的信息
    playList: [{
        al: {
        id: 143816133,
        name: "红色高跟鞋(0.88x)",
        pic: 109951167325809360,
        picUrl: "https://p1.music.126.net/iZ12K9e6Ry6z82yKCzYu4A==/109951167325809355.jpg",
        pic_str: "109951167325809355"
      },
      // 此id为歌曲的id 
      id: 1959190717,

      ar: [{
        name:"swwier"
      }]
    }],
    // 用于记录播放列表的下标值
    playListIndex: 0,
    
    // 用于暂停按钮的显示
    isPlayShow: true,

    // 用于记录弹出层是否弹出,默认值为假
    detailShow: false,
    // 存储歌词
    lyricList: {},
    // 播放当前时间
    currentTime: 0,
    
    // 存储当前播放总时间
    duration: 0,
    
    // 记录是否是登录状态
    isLogin: false,
    
    // 是否显示底部组件
    isFooterMusicShow:true
 },
  getters: {
  },
  mutations: {

    // 声明一个方法更新isPlayShow(是否播放)
    updateIsPlayShow: function (state, value) {
      // 传入参数，改变isPlayShow的值
      state.isPlayShow = value

    },
    // 更新歌单的具体信息
    updatePlayList: function (state, value) {
      state.playList = value
      console.log(state.playList)
    },

    // 更新歌单的下表
    updatePlayListIndex: function (state, value) {
      state.playListIndex = value
    },

    // 更新弹出层是否弹出
    updateDetailShow: function (state) {
      // 点击之后我们只需要对其状态进行取反即可实现弹出层的开
      state.detailShow = !state.detailShow
    },
    // 更新歌词
    updateLyricList: function (state, value) {
      state.lyricList = value
    },

    // 更新当前播放时间
    updateCurrentTime: function (state, value) {
      // console.log(state.currentTime)
      state.currentTime = value
    },
    // 更新歌曲总时间
    updateDuration: function (state,value) {
      state.duration = value
      // console.log(state.duration)
    },

    //  当我们搜索出新歌之后，更新我们的播放列表
    pushPlayList: function (state, value) {
      // 往原来的playList里面添加
      console.log(value)
      state.playList.push(value)
      console.log(state.playList)
    }


  },
  actions: {
    //  声明一个方法通过异步将获取到的歌曲歌词信息存储到vuex当中
    getLyric:async function (context, value) {
      let res = await getMusicLyric(value)
      // console.log(res)
      context.commit('updateLyricList',res.data.lrc)
    }
  },
  modules: {
  }
})
